/*
 * @Autor: 毛宇
 * @Date: 2021-06-01 17:00:00
 * @LastEditTime: 2021-06-04 16:00:00
 * @FilePath: \fby-web\src\pages\OutsideDoctor\EditItem\index.js
 * @LastEditors: 毛宇
 * @Description: 转外就诊-弹窗
 */
import React, { Component } from "react";
import {
	Form,
	Col,
	Row,
	Input,
	Modal,
	message,
	Select,
	Button,
} from "antd";
import "@/layouts/queryList.css";
import moment from "moment";
import "@ant-design/compatible/assets/index.css";
import { OutsideDoctorApi, institutionsApi,ygxxApi } from "@/services/basic";
import "./style.css";
import {ButtonLock} from "../../../components/BaseComponent/forms";
const Option = Select.Option;

class EditItem extends Component {
	constructor(props) {
		super(props);
		this.state = {
			institutionInitial: [],
			previewVisible: false,
			loading: false,
			handler: undefined,
			data: [],
			ygxx:[],
			ryxm: [], //人员姓名
			fbzt: 1, //发布状态
			visible: false,
			showFbzt: false, //显示发布状态
			userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
			previewImage: "",
			previewTitle: "",
			sfmy: "",
			sfsj: undefined,
		};
	}

	//弹出操作页面
	showModal = (handler, record) => {
		ygxxApi.search({ search: `` }).then((res) => {
			let ygxx = res.records.map((item) => (
				<Option key={item.gh} value={item.gh}>
					{item.xm}
				</Option>
			));
			this.setState({
				ygxx: ygxx,
			});
		});
		if (record) {
			//如果有record传过来 说明一定是查看或者更新操作
			const { id } = record;
			this.setState({
				visible: true,
				id,
				handler,
			});
			this.handleView(id);
		} else {
			//如果是新增操作 那直接展示弹出框 赋值操作类型
			const sfr = this.state.userInfo.yhxm
			let sfsj = new Date()
			sfsj = sfsj && moment(sfsj);
			setTimeout(() => {
				this.form.setFieldsValue({ sfsj, sfr })
			}, 1000)

			this.setState({
				visible: true,
				handler,
			});
		}
	};

	//关闭操作页面
	hideModal = () => {
		this.setState({
			visible: false,
		});
		this.form.resetFields();
	};

	//Modal框自带的取消操作
	handleCancel = () => {
		this.hideModal();
	};

	//Modal框自带的确认操作
	handleOk = () => {
		const requestType = this.state.handler === "create" ? "post" : "put";
		let newItem = this.form.getFieldsValue();
		if (requestType === "put") {
			newItem.id = this.state.id;
		}
		newItem.wzsj = newItem.wzsj && newItem.wzsj.format("YYYY-MM-DD hh:mm:ss");
		newItem = {
			ztbz: 1,
			...newItem
		}
		this.form.validateFields().then((values) => {
			OutsideDoctorApi[requestType](newItem).then((res) => {
				this.props.editItemDone();
				this.hideModal();
				message.success("操作成功");
			});
		});
	};

	//查看单条
	handleView = (id) => {
		this.setState({ id, visible: true });
		if (id) {
			OutsideDoctorApi.get(id).then((res) => {
				let { hzxm, sfzh, jbmc, xb, lxdw, lxr, sbkh, wzyymc, wzks, wzsj, sflslx, } = res.data;
				xb = Number(xb)
				sflslx = Number(sflslx)
				wzsj = wzsj && moment(wzsj);
				setTimeout(() => {
					this.form.setFieldsValue({ hzxm, sfzh, jbmc, xb, lxdw, lxr, sbkh, wzyymc, wzks, wzsj, sflslx, });
				}, 1000)
			});
		}
	};

	//是否满意变化
	change = (value) => {
		let sfmy = value.target.value;
		this.setState({
			sfmy: sfmy,
		});
	};

   onInstitutionSearch = (value, option) => {
		if (value.charCodeAt(value.length - 1) === 32) {
			value = value.trim();
			institutionsApi.search({ search: `${value}` })
				.then((res) => {
					let institution = res.records.map(item => <Option key={item.yybm} value={item.yybm}>{item.yymc}</Option>);
					this.setState({
						institution: institution,
					})
				})
		}
	}
	//人员输入时触发
	onygxxSearch = (value) => {
		if (value.charCodeAt(value.length - 1) === 32) {
			value = value.trim();
			ygxxApi.search({ search: `${value}` }).then((res) => {
				let ygxx = res.records.map((item) => (
					<Option key={item.gh} value={item.gh}>
						{item.xm}
					</Option>
				));
				this.setState({
					ygxx: ygxx,
				});
			});
		}
	};


	render() {
		const { visible, } = this.state;
		return (
			<div>
				<Modal
					title=""
					visible={visible}
					onCancel={this.handleCancel}
					width="900px"
					destroyOnClose="true"
					maskClosable={false}
					className="handleList Personal"
					forceRender
					footer={this.state.handler === "view" ? null : [
						<Button onClick={this.handleCancel}>取消</Button>,
						<ButtonLock onClick={this.handleOk} type="primary">确定</ButtonLock>
					]}
				>
					<div className="formHeader">
						<span className="handle-title">{`${this.state.handler === "create" ? "新增" : "更新"
							}账号信息`}</span>
					</div>
					<Row gutter={8}>
						<Col span={24}>
							<div className="extraInfouserlist" style={{ marginTop: "0" }}>
								账号信息
							</div>
						</Col>
					</Row>
					<Form autoComplete="off" ref={(form) => (this.form = form)}>
						<Row gutter={2}>
							<Col span={8}>
								<Form.Item
									name="hzxm"
									label="账号名称"
									rules={[{ required: true, message: "此为必填项" }]}
								>
									{/* {handler === "create" ?
										<Input
											placeholder="请输入"
										/>
										: <Input
											placeholder="请输入"
											disabled
										/>} */}
											<Input
											placeholder="请输入"
										/>
									{/* <Select
										showSearch
										defaultActiveFirstOption={false}
										showArrow={false}
										filterOption={false}
										onSearch={(value) => {
											if (value.charCodeAt(value.length - 1) >= 32) {
												value = value.replace(/\s+/g, '')
												// 这两行写下去也是可以变成拿到数据先留着
												// let formData = new FormData();
												// formData.append("xm", value);
												personalApi.postXm(value).then(res => {
													if (res.data !== null && res.data.length !== 0) {
														const rycx = res.data.map(item => <Option value={item.xm} key={item.id} sfzh={item.sfzh} xb={Number(item.xb)} lxdw={item.lxdw} lxr={item.lxr} sbkh={item.sbkh}>{item.xm}</Option>)
														this.setState({ ryxm: rycx })
													} else {
														message.warning('暂无数据')
													}
												})
											}
											else {
											}
										}}
										onChange={(value, options) => {
											const { sfzh, xb, lxdw, lxr, sbkh, } = options
											setTimeout(() => {
												this.form.setFieldsValue({ sfzh, xb, lxdw, lxr, sbkh, })
											}, 1000)
										}}
										notFoundContent={null}
										// disabled={!createrecord && handler === 'create' ? false : true}
										allowClear={false}
										placeholder='请输入关键字空格查询'
									>
										{ryxm}
									</Select> */}
								</Form.Item>
							</Col>
							<Col span={8}>
								<Form.Item
									label="账号id"
									name="sfzh"
									rules={[{ required: true, message: "此为必填项" }]}
								>
								
										<Input
											placeholder="请输入"
										/>
									
								</Form.Item>
							</Col>
							<Col span={8}>
								<Form.Item label="所属人" name="jbmc" >
									<Select
										allowClear
										placeholder="输入关键字按空格查找"
										filterOption={false}
										showSearch={true}
										onSearch={this.onygxxSearch}
										showArrow={false}
									>
										{this.state.ygxx}
									</Select>
								</Form.Item>
							</Col>

							<Col span={8}>
								<Form.Item label="所属公司" name="wzyymc" >
									<Select allowClear
										placeholder="输入关键字按空格查找"
										filterOption={false}
										showSearch={true}
										onSearch={this.onInstitutionSearch}
										showArrow={false}

									>
										{this.state.institution}
									</Select>
								</Form.Item>
							</Col>

							{/* <Row gutter={8}>
							<Col span={24}>
								<div className="extraInfouserlist">
									转外信息
								</div>
							</Col>
						</Row>
						<Row gutter={2}>
							<Col span={8}>
								<Form.Item label="外转医院" name="wzyymc" rules={[{ required: true, message: "此为必填项" }]}>
									<Input placeholder="请输入" />
								</Form.Item>
							</Col>
							<Col span={8}>
								<Form.Item label="外转科室" name="wzks" rules={[{ required: true, message: "此为必填项" }]}>
									<Input placeholder="请输入" />
								</Form.Item>
							</Col>
							<Col span={8}>
								<Form.Item label="外转时间" name="wzsj" rules={[{ required: true, message: "此为必填项" }]}>
									<DatePicker format={"YYYY-MM-DD"} />
								</Form.Item>
							</Col>
							<Col span={8}>
								<Form.Item label="是否落实联系" name="sflslx" rules={[{ required: true, message: "此为必填项" }]}>
									<Radio.Group onChange={this.change}>
										<Radio value={0}>否</Radio>
										<Radio value={1}>是</Radio>
									</Radio.Group>
								</Form.Item>
							</Col>*/}
						</Row>
					</Form>
				</Modal>
			</div>
		);
	}
}
export default EditItem;
